<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>OpenLayers v8.2.0 API - Module: ol/source/XYZ</title>
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css"
        crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="styles/prettify-tomorrow.css">
    <link rel="stylesheet" type="text/css" href="styles/jaguar.css">
    <link rel="stylesheet" type="text/css" href="styles/carbon.css">
    <link rel="stylesheet" type="text/css" href="/theme/ol.css">
    <link rel="stylesheet" type="text/css" href="/theme/site.css">
</head>

<body>
    <header class="navbar navbar-expand-sm navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
        <a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70"
                alt="">&nbsp;OpenLayers</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu"
            aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- menu items that get hidden below 768px width -->
        <nav class="collapse navbar-collapse" id="olmenu">
            <ul class="nav navbar-nav ms-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button"
                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
                    <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
                        <a class="dropdown-item" href="/doc/">Docs</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="/doc/quickstart.html"><i
                                class="fa fa-check fa-fw me-2 fa-lg"></i>快速入门</a>
                        <a class="dropdown-item" href="/doc/faq.html"><i
                                class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
                        <a class="dropdown-item" href="/doc/tutorials/"><i
                                class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i
                                class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button"
                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-sitemap me-1"></i>API
                    </a>
                    <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
                        <a class="dropdown-item" href="/en/latest/apidoc/"><i
                                class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v8.2.0
                            (latest)</a </div>
                </li>
            </ul>
        </nav>
    </header>

    <div class="container-fluid">
        <div id="wrap" class="row">
            <div class="navigation col-md-4 col-lg-3">
                <div class="search-wrapper">
                    <div class="search">
                        <input id="search" type="text" autocomplete="off" class="form-control input-sm"
                            placeholder="Search Documentation">
                    </div>
                </div>
                <div class="navigation-list-wrapper">
                    <ul class="navigation-list search-empty">
                        <li class="loading">Loading …
                    </ul>
                </div>
            </div>

            <div class="main col-md-8 col-lg-9">
                <h1 class="page-title" data-filename="module-ol_source_XYZ.html">Module: ol/source/XYZ</h1>
                <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
                    <button id="latest-dismiss" type="button" class="btn-close" data-bs-dismiss="alert"
                        aria-label="Close"></button>
                    This documentation is for OpenLayers v<span id="package-version">8.2.0</span>. The <a
                        id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
                </div>




                <section class="content">

                    <header>
                        <h2 class="my-3">ol/source/XYZ
                        </h2>
                        <br>




                        <div class="row p-3 ">
                            <!-- <div id="ad" class="col-lg-5 order-2 align-self-center border rounded bg-light ">
                                <script async type="text/javascript"
                                    src="https://cdn.carbonads.com/carbon.js?serve=CE7DV53U&placement=openlayersorg"
                                    id="_carbonads_js"></script>
                            </div> -->

                        </div>
                    </header>

                    <article>
                        <div class="container-overview">






                            <dl class="details">





















                            </dl>




                        </div>










                        <h3 class="subsection-title">Classes</h3>

                        <dl>
                            <dt><a href="module-ol_source_XYZ-XYZ.html">XYZ</a></dt>
                            <dd></dd>
                        </dl>











                        <h3 class="subsection-title">Type Definitions</h3>

                        <dl>

                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~Options">
                                    </div>
                                    <h4 class="name">
                                        Options<span class="type-signature type object">{Object}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">


                                    <h5 class="subsection-title">Properties:</h5>

                                    <dl>

                                        <table class="props">
                                            <thead>
                                                <tr>

                                                    <th>Name</th>


                                                    <th>Type</th>

                                                    <th class="last">Description</th>
                                                </tr>
                                            </thead>

                                            <tbody>


                                                <tr>

                                                    <td class="name"><code>attributions</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_source_Source.html#~AttributionLike">AttributionLike</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>Attributions.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>attributionsCollapsible</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>



                                                        <br>(defaults to true)


                                                    </td>

                                                    <td class="description last">
                                                        <p>归属信息是否可覆盖</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>cacheSize</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>Initial tile cache size. Will auto-grow to hold at least the
                                                            number of tiles in the viewport.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>crossOrigin</code></td>


                                                    <td class="type">


                                                        <span class="param-type">null</span>
                                                        |

                                                        <span class="param-type">string</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>The <code>crossOrigin</code> attribute for loaded images.
                                                            Note that
                                                            you must provide a <code>crossOrigin</code> value if you
                                                            want to access pixel data with the Canvas renderer.
                                                            See <a
                                                                href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image">https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image</a>
                                                            for more detail.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>interpolate</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>



                                                        <br>(defaults to true)


                                                    </td>

                                                    <td class="description last">
                                                        <p>Use interpolated values when resampling. By default,
                                                            linear interpolation is used when resampling. Set to false
                                                            to use the nearest neighbor instead.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>opaque</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>



                                                        <br>(defaults to false)


                                                    </td>

                                                    <td class="description last">
                                                        <p>Whether the layer is opaque.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>projection</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_proj.html#~ProjectionLike">ProjectionLike</a></span>



                                                        <br>(defaults to 'EPSG:3857')


                                                    </td>

                                                    <td class="description last">
                                                        <p>Projection.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>reprojectionErrorThreshold</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>



                                                        <br>(defaults to 0.5)


                                                    </td>

                                                    <td class="description last">
                                                        <p>Maximum allowed reprojection error (in pixels).
                                                            Higher values can increase reprojection performance, but
                                                            decrease precision.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>maxZoom</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>



                                                        <br>(defaults to 42)


                                                    </td>

                                                    <td class="description last">
                                                        <p>Optional max zoom level. Not used if <code>tileGrid</code> is
                                                            provided.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>minZoom</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>



                                                        <br>(defaults to 0)


                                                    </td>

                                                    <td class="description last">
                                                        <p>Optional min zoom level. Not used if <code>tileGrid</code> is
                                                            provided.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>maxResolution</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>Optional tile grid resolution at level zero. Not used if
                                                            <code>tileGrid</code> is provided.
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>tileGrid</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_tilegrid_TileGrid-TileGrid.html">TileGrid</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>平铺网格。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>tileLoadFunction</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_Tile.html#~LoadFunction">LoadFunction</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>Optional function to load a tile given a URL. The default is
                                                        </p>
                                                        <pre class="prettyprint source lang-js"><code>function(imageTile, src) {
  imageTile.getImage().src = src;
};</code></pre>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>tilePixelRatio</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>



                                                        <br>(defaults to 1)


                                                    </td>

                                                    <td class="description last">
                                                        <p>The pixel ratio used by the tile service.
                                                            For example, if the tile service advertizes 256px by 256px
                                                            tiles but actually sends 512px
                                                            by 512px images (for retina/hidpi devices) then
                                                            <code>tilePixelRatio</code>
                                                            should be set to <code>2</code>.
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>tileSize</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>
                                                        |

                                                        <span class="param-type"><a
                                                                href="module-ol_size.html#~Size">Size</a></span>



                                                        <br>(defaults to [256, 256])


                                                    </td>

                                                    <td class="description last">
                                                        <p>The tile size used by the tile service.
                                                            Not used if <code>tileGrid</code> is provided.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>gutter</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>



                                                        <br>(defaults to 0)


                                                    </td>

                                                    <td class="description last">
                                                        <p>The size in pixels of the gutter around image tiles to
                                                            ignore.
                                                            This allows artifacts of rendering at tile edges to be
                                                            ignored.
                                                            Supported images should be wider and taller than the tile
                                                            size by a value of <code>2 x gutter</code>.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>tileUrlFunction</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_Tile.html#~UrlFunction">UrlFunction</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>Optional function to get
                                                            tile URL given a tile coordinate and the projection.
                                                            Required if <code>url</code> or <code>urls</code> are not
                                                            provided.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>url</code></td>


                                                    <td class="type">


                                                        <span class="param-type">string</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>URL template. Must include <code>{x}</code>, <code>{y}</code>
                                                            or <code>{-y}</code>,
                                                            and <code>{z}</code> placeholders. A <code>{?-?}</code>
                                                            template pattern, for example
                                                            <code>subdomain{a-f}.domain.com</code>,
                                                            may be used instead of defining each one separately in the
                                                            <code>urls</code> option.
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>urls</code></td>


                                                    <td class="type">


                                                        <span class="param-type">Array.&lt;string></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>URL 模板的数组。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>wrapX</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>



                                                        <br>(defaults to true)


                                                    </td>

                                                    <td class="description last">
                                                        <p>Whether to wrap the world horizontally.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>transition</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>



                                                        <br>(defaults to 250)


                                                    </td>

                                                    <td class="description last">
                                                        <p>Duration of the opacity transition for rendering.
                                                            To disable the opacity transition, pass
                                                            <code>transition: 0</code>.
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>zDirection</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>
                                                        |

                                                        <span class="param-type"><a
                                                                href="module-ol_array.html#~NearestDirectionFunction">NearestDirectionFunction</a></span>



                                                        <br>(defaults to 0)


                                                    </td>

                                                    <td class="description last">
                                                        <p>Choose whether to use tiles with a higher or lower zoom level
                                                            when between integer
                                                            zoom levels. See <a
                                                                href="module-ol_tilegrid_TileGrid-TileGrid.html#getZForResolution"><code>getZForResolution</code></a>.
                                                        </p>

                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </dl>






















                                </dl>



                            </dd>

                        </dl>



                    </article>

                </section>




            </div>
        </div>
    </div>
    <script>prettyPrint();</script>
    <script src="scripts/linenumber.js"></script>
    <script src="scripts/main.js"></script>
</body>

</html>